<template>
  <div class="myInfo">
    <header>
      <div class="photo">
        <img src="../../static/images/dizi.jpg" alt="头像">
      </div>
      <div class="selfInfo">
        <p>{{userName}}</p>
        <p>{{userPhone}}</p>
      </div>
    </header>
    <div>登录进来的用户名</div>
    <p class="loginOut" @click="loginOut">退出登录</p>
  </div>
</template>
<script type="text/ecmascript-6">
  export default{
    data(){
      return {
        userName:'userName',
        userPhone:'userPadsadadahone',
      }
    },
    methods: {
      loginOut() {
        this.$router.push({path:'/'})
      }
    },
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .myInfo {
    header {
      display flex
      align-items center
      padding .3rem
      background #ebf2f8
      div.photo {
        width 2rem
        height 2rem
        img {
          width 100%
          height 100%
          border-radius 100%
        }
      }
      div.selfInfo {
        display flex
        flex-direction column
        align-items center
        margin-left .3rem
        p {
          width 100%
          height auto
          text-align left
          font-size .53rem
          padding .2rem
          margin 0 auto
        }
      }
    }
    p.loginOut {
      width 8rem;
      height 1rem;
      line-height 1rem
      margin 3rem auto
      border-radius 20px
      color #fff
      font-size .43rem
      background-color: #f11;
      box-shadow 5px 5px 10px rgba(0,0,0,.3)
    }
  }
</style>
